<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="renderer" content="webkit">
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <title>go8商城</title>
    <link rel="stylesheet" href="/style/style.css">
	<!-- <link rel="stylesheet" type="text/css" href="http://unpkg.com/iview/dist/styles/iview.css">
	<script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>
	<script type="text/javascript" src="http://unpkg.com/iview/dist/iview.min.js"></script> -->
</head>

<body>
    <!-- 顶部栏目 -->
    <div id="header" th:insert="header :: header"></div>
    <div class="wrap">
		
		<h1 style="margin: 20px;">注册go8账号</h1>
       
	<div class="container">
		<div id="register" style="width: 50%;">
    <i-form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
        <form-item label="用户名" prop="userName">
            <i-input v-model="formValidate.userName" placeholder="输入用户名"></i-input>
        </form-item>
        <form-item label="密  码" prop="password">
            <i-input v-model="formValidate.password" placeholder="输入密码" type="password"></i-input>
        </form-item>
		<form-item label="确认密码" prop="twopassword">
		    <i-input v-model="formValidate.twopassword" placeholder="输入确认密码" type="password"></i-input>
		</form-item>
        <form-item label="手机号码" prop="phone">
            <i-input v-model="formValidate.phone" placeholder="输入手机号"></i-input>
        </form-item>
        <form-item>
            <i-button type="primary" @click="handleSubmit('formValidate')">注 册</i-button>
            <i-button  @click="handleReset('formValidate')" style="margin-left: 8px">重 置</i-button>
        </form-item>
    </i-form>
    </div>
	</div>
		
    </div>
    <div id="footer" th:insert="footer :: copy"></div>
    
    <script th:inline="javascript">
	var register = new Vue({
		el:'#register',
		data(){
			const validatePassCheck = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('确认密码不能为空'));
                } else if (value !== this.formValidate.password) {
                    callback(new Error('2次密码输入不匹配!'));
                } else {
                    callback();
                }
            };
			const validateUserName = (rule, value, callback) => {
			    if (value === '') {
			        callback(new Error('姓名不能为空'));
			    }else {
					//验证唯一性
					jQuery.ajax({
						url:GO8.DN.ROOT+"check",
						type:'get',
						data:{userName:value},
						dataType:'json',
						success:function(res){
							if(res.status.code == 2000 && res.data){
								callback(new Error('该用户名已被占用'));
							}else if(res.status.code == 2000 && !res.data){
								callback()
							}
						}
					})
			    }
			};
			const validatePhone = (rule, value, callback) => {
			    if (value === '') {
			        callback(new Error('手机号码不能为空'));
			    }else {
					//验证规则
					if(!/^1[0-9]{10}$/.test(value)){
						callback(new Error('手机号码不合法'));
						return
					}
					//验证唯一性
					jQuery.ajax({
						url:GO8.DN.ROOT+"check",
						type:'get',
						data:{phone:value},
						dataType:'json',
						success:function(res){
							if(res.status.code == 2000 && res.data){
								callback(new Error('该手机号码已被使用'));
							}else if(res.status.code == 2000 && !res.data){
								callback()
							}
						}
					})
			    }
			};
			return {
				formValidate: {
					userName: '',
					password: '',
					twopassword: '',
					phone: ''
				},
				ruleValidate: {
					userName: [
						{ validator: validateUserName, trigger: 'blur' }
					],
					password: [
						{ required: true, message: '密码不能为空', trigger: 'blur' },
					],
					twopassword: [
						{ validator: validatePassCheck, trigger: 'blur' },
					],
					phone: [
						{ validator: validatePhone, trigger: 'blur' }
					]
				},
				returnUrl:/*[[${returnUrl}]]*/ ''
			}
		},
		methods: {
			handleSubmit (name) {
				this.$refs[name].validate((valid) => {
					if (valid) {
						//this.$Message.success('Success!');
						//注册用户
						jQuery.ajax({
							url:GO8.DN.ROOT+"register",
							type:'post',
							data:this.formValidate,
							dataType:'json',
							success:function(res){
								if(res.status.code == 2000){
									//本地存储
									Cookies.set("token",res.data.token)
									if(!login.returnUrl){
										window.location.href = GO8.DN.INDEX
										return
									}
									if(login.returnUrl.indexOf("?") == -1)
										window.location.href = login.returnUrl+"?token="+res.data.token
									else{
										window.location.href = login.returnUrl+"&token="+res.data.token
									}
								}else{
									this.$Message.error(res.status.message);
								}
							}
						})
					} else {
						this.$Message.error('表单数据不合法!');
					}
				})
			},
			handleReset (name) {
				this.$refs[name].resetFields();
			}
		}
	})
    </script>
</body>

</html>
